<template>
  <div :id="chart.id" />
</template>

<script>
export default {
  name: "G2Histogram",
  props: {
    chart: {
      type: Object,
      default() {
        return {
          id: "h1",
          data: [
            { genre: "Title1", sold: 275 },
            { genre: "Title2", sold: 115 },
            { genre: "Title3", sold: 120 },
            { genre: "Title4", sold: 350 },
            { genre: "Title5", sold: 150 }
          ]
        };
      }
    }
  },
  data() {
    return {};
  },

  mounted() {
    const data = this.chart.data;
    const container = this.chart.id;
    const chart = new G2.Chart({
      container,
      forceFit: true,
      // width: this.oC1Width,
      height: 300
    });
    chart.source(data);
    chart
      .interval()
      .position("genre*sold")
      .color("genre");
    chart.render();
  }
};
</script>

<style lang="scss" scoped></style>
